<template>
  <div>
    <!-- 初始化界面 -->
    <div v-show="isShow">
      <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
      <FilterTable ref="table" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" :isSelectColumn="false" :datakey="'records'" :onColumnsChange="columns => this.columns = columns">
        <!-- <template slot="controls" slot-scope="props">
          <el-button size="small" type="primary"  @click="addhandle">新增</el-button>
        </template> -->
      </FilterTable>
      <Drawer :visible.sync="visible" title="权限管理" :width="920" destroyOnClose :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
        <EmployeeAuthPanel @close="closeHandler" :rowData="rowData" :type1="type1" />
      </Drawer>
      <BaseDialog :visible.sync="showAddNew" :title="title" destroyOnClose :width="dialogWidth" :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
        <AddForm v-show="title == '新增'" :dataType="dataType" :afterSale="afterSale" :workGroupsData="workGroupsData" :maintainWorkData="maintainWorkData" @close="closeDialog" />
        <EditFrom v-show="title == '编辑'" :dataType="dataType" :afterSale="afterSale" :workGroupsData="workGroupsData" :maintainWorkData="maintainWorkData" :type="title" :rowData="this.rowData" @close="closeDialog" />
        <EditFrom v-show="title == '明细'" :dataType="dataType" :afterSale="afterSale" :workGroupsData="workGroupsData" :maintainWorkData="maintainWorkData" :type="title" :rowData="this.rowData" @close="closeDialog" />
        <!-- 删除 -->
        <!-- <div v-show="title == '重置密码'" style="text-align: center;margin-top: 30px;">
          <p style="padding:0 0 37px 0;">确定重置密码吗?</p>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog(false)">取 消</el-button>
                <el-button type="primary" @click="resetConfirm">确 定</el-button>
            </div>
        </div>-->
      </BaseDialog>
    </div>
    <!-- 点击立即配置权限后的界面 -->
    <div v-if="!isShow">
      <promptl :employeeNo="employeeNo" :promptlType="promptlType" :employeeName="employeeName" :jurisdictionData="jurisdictionData" />
      <div style="text-align: center;margin: 20px 0;">
        <el-button @click="backHandle" type="primary">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { searchRoleEmp, lockflag, removeLockflag, searchEmployee, editPassword, workGroups, maintainWorkType } from '@/api/common/auth/employeeAuth';
import EmployeeAuthPanel from './employeeAuthPanel';
import AddForm from './addForm.vue';
import EditFrom from './editForm.vue';
import promptl from './promptl/index.vue';
//2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
import { getComOrgTreeListDistinct } from '@/api/common/org/employeeInfo';
import { getJsonTree } from '@/utils/index';
//2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
export default {
  name: 'EmployeeAuth',
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      dialogWidth: '90%',
      title: '',
      topFilterList: this.createTopFilterList(),
      visible: false,
      fetchApi: searchEmployee,
      fetchParams: { xhrAbort: false, employeeName: '', employeeNo: '', employeeStatus: '', orgId: '', validStatus: '' },
      columns: this.createTableColumns(),
      showAddNew: false,
      roleId: '',
      rowData: null,
      type1: 'edit',
      isShow: true,
      employeeNo: '',
      employeeName: '',
      userCode: '',
      jurisdictionData: '',
      workGroupsData: [],
      maintainWorkData: [],
      afterSale: '',
      dataType: '',
      promptlType: ''
    };
  },
  components: {
    EmployeeAuthPanel,
    AddForm,
    EditFrom,
    promptl
  },
  methods: {
    //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
    async inputTree() {
      const res = await getComOrgTreeListDistinct();
      var that = res.data;
      that.forEach(el => (el.text = el.text));
      that.forEach(el => (el.value = el.orgId));
      that.forEach(el => (el.parentId = el.parent));
      this.topFilterList.find(item => item.fieldName === 'orgId').itemList = getJsonTree(that);
    },
    //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 180,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detail(props.row, '编辑')}>
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.jurisdiction(props.row)}>
                  权限配置
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '员工编号',
          dataIndex: 'employeeNo',
          width: 150,
          hidden:true,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        /* {
            title: '账号',
            dataIndex: 'userCode',
            sorter: true,
            filter: true,
            filterType: 'input',
            // align:"center"
          }, */
        {
          title: '员工姓名',
          dataIndex: 'employeeName',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '登录账号',
          dataIndex: 'userCode',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '性别',
          dataIndex: 'gender',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span>{this.createDictText(props.row.gender, '1002')}</span>;
          }
        },
        {
          title: '手机号码',
          dataIndex: 'mobilePhone',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '所属部门',
          dataIndex: 'orgName',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '在职状态',
          dataIndex: 'employeeStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1008'),
          render: props => {
            // return <el-tag type={props.row.employeeStatus === 10081001 ? 'success' : 'primary'} close-transition>{this.createDictText(props.row.employeeStatus, '1008')}</el-tag>;
            return <span>{this.createDictText(props.row.employeeStatus, '1008')}</span>;
          }
        },
        /* {
            title: '状态',
            dataIndex: 'userStatus',
            sorter: true,
            filter: true,
            filterType: 'checkbox',
            filterItems: this.createDictList('1003'),
            render: props => {
              return <el-tag type={props.row.userStatus === 10031001 ? 'success' : 'primary'} close-transition>{this.createDictText(props.row.userStatus, '1003')}</el-tag>;
            }
          }, */
        {
          title: '职位',
          dataIndex: 'position',
          sorter: true,
          filter: true,
          filterType: 'input',
          width: 250
          // align:"center"
        }
        /* {
            title: '员工职位',
            dataIndex: 'empPosition',
            sorter: true,
            filter: true,
            filterType: 'input',
            // align:"center"
          }, */
        // {
        //   title: '是否冻结',
        //   dataIndex: 'lockFlag',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: props => {
        //     // return <el-tag type={props.row.lockFlag === 10041001 ? 'success' : 'primary'} close-transition>{this.createDictText(props.row.lockFlag, '1004')}</el-tag>;
        //     return <span>{this.createDictText(props.row.lockFlag, '1004')}</span>;
        //   }
        // },
        // {
        //   title: '备注',
        //   dataIndex: 'reMake',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        //   // align:"center"
        // },
        // {
        //   title: '数据来源',
        //   dataIndex: 'dataSources',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1045'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.dataSources, '1045')}</span>;
        //   }
        // }
      ];
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '员工姓名',
          fieldName: 'employeeName',
          placeholder: '员工姓名...'
        },
        {
          type: 'INPUT',
          label: '登录账号',
          fieldName: 'userCode',
          placeholder: '登录账号...'
        },
        {
          type: 'INPUT',
          label: '员工编号',
          fieldName: 'employeeNo',
          hidden:true,
          placeholder: '员工编号...'
        },
        // {
        //   type: 'INPUT',
        //   label: '账号',
        //   fieldName: 'userCode',
        //   placeholder: '账号...'
        // },
        {
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
          type: 'INPUT_TREE',
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
          label: '所属部门',
          fieldName: 'orgId',
          placeholder: '所属部门...',
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
          initialValue: '',
          itemList: []
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
        },
        {
          type: 'SELECT',
          label: '在职状态',
          fieldName: 'employeeStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('1008')
        }
      ];
    },
    init() {
      if (this.afterSale == 10041001) {
        console.log('123', this.afterSale);
        // 工位接口
        // maintainWorkType().then(res => {
        //   res.data.forEach(x => {
        //     // this.maintainWorkData.push({text:x.WORKGROUP_NAME,value:x.WORKGROUP_CODE})
        //     this.maintainWorkData.push({ text: x.LABOUR_POSITION_NAME, value: x.LABOUR_POSITION_CODE });
        //   });
        // });
        // 班主接口
        // workGroups().then(res => {
        //   res.data.forEach(x => {
        //     this.workGroupsData.push({ text: x.workgroupName, value: x.workgroupCode });
        //   });
        // });
        // console.log(this.workGroupsData,"工位",this.maintainWorkData)
      }
    },

    getCookie() {
      let allCookie = document.cookie.split(';');
      allCookie.forEach(x => {
        if (x.indexOf('dataType') > -1) {
          this.dataType = x.split('=')[1];
        }

        if (x.indexOf('afterSale') > -1) {
          this.afterSale = x.split('=')[1];
        }
      });
      //判断是否为车厂10461003
      // console.log(this.dataType,"dataType")
      if (this.dataType == 10461003) {
        // console.log(this.dataType,"车厂")
      }
    },
    // 权限配置
    jurisdiction(row) {
      // console.log(row,"jurisdiction")
      this.isShow = false;
      this.employeeNo = row.employeeNo;
      this.jurisdictionData = row;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    //新增
    addhandle() {
      this.title = '新增';
      this.showAddNew = true;
      this.dialogWidth = '90%';
      this.jurisdictionData = '';
    },
    // 重置密码
    resetPassword(row) {
      this.title = '重置密码';
      this.open(row);
    },
    //确定重置密码
    open(row) {
      // console.log(row,"resetPassword")

      this.$confirm('确定重置密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //请求接口
          editPassword(row.employeeNo).then(res => {
            if (res.resultCode == 200) {
              this.$message({
                type: 'success',
                message: '密码重置成功!'
              });
              this.closeDialog(false, 'refresh');
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消密码重置'
          });
          this.closeDialog(false);
        });
    },
    // resetConfirm(){
    //   console.log('确定重置密码')

    // },
    // 关闭
    closeDialog(val, type, roleNo, employeeName) {
      console.log(roleNo, employeeName, 'roleNo456', type);
      this.showAddNew = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
      if (type == 'deploy') {
        this.isShow = val;
        this.employeeNo = roleNo;
        this.employeeName = employeeName;
        this.promptlType = 'deploy';
      }
    },
    // 返回
    backHandle() {
      this.isShow = true;
      this.employeeNo = null;
      this.jurisdictionData = null;
      this.fetchParams = { ...this.fetchParams };
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    detail(data, dataTypes) {
      this.showAddNew = true;
      this.dialogWidth = '90%';
      //控制抽屉组件 this.visible = true;
      if (dataTypes == '明细') {
        this.type1 = 'show';
        this.title = '明细';
      } else {
        this.type1 = 'edit';
        this.title = '编辑';
      }
      this.rowData = data;
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getCookie();
    this.init();
  },
  //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
  created() {
    //部门树
    this.inputTree();
  }
  //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
};
</script>

<style lang="less" scoped>
.el-checkbox + .el-checkbox {
  margin-left: 0px;
}

.el-checkbox {
  margin-right: 25px;
}

.menu-header {
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  background: #eee;
  text-indent: 5px;
}
</style>
